<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
      <div class="toutu-box sz" @click="photoShowModal = true">
        <p class="fz32 cen pt20" v-if="!toutu">点击上传头图</p>
        <img :src="toutu" v-if="toutu" class="w100 h100 jbnjxewe" />
      </div>
      <div class="NewsDetails-context">
        <div class="fz48">
          <p>
            <span class="henxinase"></span>
          </p>

          <n-input
            class="fz48 br0"
            v-model:value="title"
            type="textarea"
            placeholder=""
            size="medium"
            clearable
          ></n-input>
        </div>
        <p class="z9 mt30">
          <n-input
            v-model:value="teqian"
            type="text"
            size="medium"
            clearable
          ></n-input>
        </p>
        <div class="text-fwb mt20">
          <n-input
            class="br0 text-fwb"
            v-model:value="xqsee"
            type="textarea"
            placeholder=""
            size="medium"
            clearable
            autosize
          ></n-input>
          <p class="mt20">
            轮播图<span class="fz12 z9">(该效果不是真实效果请参考)</span>
          </p>
          <div class="mt20 dsfsdrrew">
            <template v-for="(item, idx) in bannerList" :key="idx">
              <div class="baneerkje" v-if="item">
                <i
                  class="iconfont dx-close red fz32 xdeeerew"
                  @click="deling(idx)"
                ></i>
                <img :src="item" class="w100 h100 jbnjxewe" />
              </div>
            </template>
            <div
              class="baneerkje vertical-center sz"
              @click="photoShowModaler = true"
            >
              <i class="iconfont dx-add fz40 z9"></i>
            </div>
          </div>
          <p class="fz12 z9 mt20">(以下效果在前端不展示)</p>
          <div class="mt10 display-flex">
            类型:
            <n-radio-group
              v-model:value="dxleujne"
              name="radiogroup"
              class="ml10"
            >
              <n-space>
                <n-radio
                  v-for="song in newOpt"
                  :key="song.value"
                  :value="song.value"
                >
                  {{ song.label }}
                </n-radio>
              </n-space>
            </n-radio-group>
          </div>
          <div class="mt20 display-flex">
            <n-radio-group name="radiogroup">
              <n-space>
                <n-checkbox v-model:checked="bannertr">
                  <span class="fz24">设为banner展示</span></n-checkbox
                >
              </n-space>
            </n-radio-group>
          </div>
          <div class="mt20 display-flex">
            <n-radio-group name="radiogroup">
              <n-space>
                <n-checkbox v-model:checked="sstj">
                  <span class="fz24">设为首页案例展示</span></n-checkbox
                >
              </n-space>
            </n-radio-group>
          </div>
          <div class="mt20">
            <n-button
              type="primary"
              size="medium"
              @click="addData"
              :loading="loading"
              >{{ isbj ? "修改" : "发布" }}新闻</n-button
            >
            <n-button size="medium" class="ml20" @click="Back"
              >返回上一页</n-button
            >
          </div>
        </div>
      </div>
    </div>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>头图库</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="头图库"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>多张图片</div>
      </template>
      <div>
        <MorePictures @getImg="getImgList"></MorePictures>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImglist">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import MorePictures from "../../../components/util/MorePictures.vue";
import { da } from "date-fns/locale";
import { dxget, dxpost, callBack, qurl } from "../../../util";
const toutu = ref();
const cz = qurl();
const loading = ref(false);
const photoShowModal = ref(false);
const photoShowModaler = ref(false);
const title = ref(
  "引领电动交通未来，ABB电动交通在意大利建立其最大直流快速充电设施中心"
);
const teqian = ref("新闻稿 | 瑞士，苏黎世 | 2022-06-24");
const xqsee =
  ref(`• ABB电动交通投资3000万美元建造电动交通卓越中心（E-mobility Centre of
Excellence）, 占地16,000平方米

•该中心设有3200平方米空间专用于产品开发和原型设计

• ABB电动交通创新设计包括Terra

•360一体化电动汽车充电桩，该产品可在三分钟充电时间内提供100公里的续航里程`);
const bannerList = ref([]);
const dxleujne = ref("1");
const bannertr = ref(true);
const Back = callBack;
const sstj = ref(true);
const isbj = ref(false); // 是否为编辑的状态
let jjnmnxe = "";

const newOpt = [
  {
    label: "公司新闻",
    value: "1",
  },
  {
    label: "业务新闻",
    value: "2",
  },
];
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  toutu.value = jjnmnxe;
  photoShowModal.value = false;
};
let imgList = [];
const getImgList = (data) => {
  imgList = data;
};
const setImglist = (data) => {
  console.log(data);
  imgList.map((a) => {
    bannerList.value.push(a);
  });
  photoShowModaler.value = false;
};
const deling = (idx) => {
  bannerList.value.splice(idx, 1);
};

const addData = async () => {
  loading.value = true;
  const objse = {
    id: null,
    toutu: toutu.value,
    title: title.value,
    teqian: teqian.value,
    xqsee: xqsee.value,
    bannerList: bannerList.value,
    dxleujne: dxleujne.value,
    bannertr: bannertr.value,
    sstj: sstj.value,
  };
  if (cz.id) {
    objse.id = cz.id;
  }
  const res = await dxpost(
    "abb/abbnewsManagement",
    objse,
    cz.id ? "PUT" : "POST"
  );
  loading.value = false;
  window.$message.success("添加成功");
  Back();
};
const initData = async () => {
  let { data }: any = await dxget("abb/abbnewsManagement", cz);
  console.log(data);
  toutu.value = data.toutu;
  title.value = data.title;
  teqian.value = data.teqian;
  xqsee.value = data.xqsee;
  bannerList.value = data.bannerList.split(",");
  dxleujne.value = "" + data.dxleujne;
  bannertr.value = data.bannertr ? true : false;
  sstj.value = data.sstj == 1 ? true : false;
};
if (cz.id) {
  initData();
  isbj.value = true;
}
</script>
 <style scoped>
</style>